<%--
  Created by IntelliJ IDEA.
  User: 陆锦鹏
  Date: 2019/9/25
  Time: 16:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>领养猫咪展示</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/adopt/indexCss.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/adopt/adoptCatCss.css" type="text/css">
</head>

<body>

<!-- 导航栏 -->
<jsp:include page="../common/nav.jsp"></jsp:include>

<div class="layui-carousel container" id="test1" style="background: none;margin-top: 30px">
    <div carousel-item="">
        <div><img class="carousel-img" src="<%=request.getContextPath()%>/imgs/adopt_c1.jpg" alt=""></div>
        <div><img class="carousel-img" src="<%=request.getContextPath()%>/imgs/adopt_m1.jpg" alt=""></div>
        <div><img class="carousel-img" src="<%=request.getContextPath()%>/imgs/adopt_img1.jpg" alt=""></div>
        <div><img class="carousel-img" src="<%=request.getContextPath()%>/imgs/adopt_c1.jpg" alt=""></div>
        <div><img class="carousel-img" src="<%=request.getContextPath()%>/imgs/adopt_c1.jpg" alt=""></div>
    </div>
</div>

<!-- 按种类查询猫咪 -->
<div class='container' style='margin-top:20px;margin-bottom:20px'>
    <div class='row'>
        <div class='col-md-3'>
            <select class='form-control' id='' onchange='changeType(this)'>

                <option value='-1'>===请您选择猫咪类型===</option>
                <c:forEach var="catSpecies" items="${requestScope.catSpeciesList}">
                    <option value='${catSpecies.id}'>${catSpecies.speciesName}</option>
                </c:forEach>

            </select>
        </div>
        <div class='col-md-3'>
            <div class='input-group'>
                <input type='text' class='form-control' id='' value='' placeholder="请您输入猫咪的类型">
                <span class='input-group-btn'>
                    <button class='btn btn-default' type='button' onclick='selectAll()'>查询</button>
                </span>
            </div>
        </div>
    </div>
</div>


<!-- 领养猫咪展示 -->
<div class='container'>
    <div class='row'>

        <c:if test="${requestScope.catVos!=null && requestScope.catVos.size()>0}">
            <c:forEach var="catVo" items="${requestScope.catVos}">
                <div class='col-md-4'>
                    <div class='thumbnail'>

                        <a href='#'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>
                        <div class='caption' style='overflow:hidden'>
                            <a href='#'>
                                <h3 align='center' class='text-success'>${catVo.speciesName}</h3>
                            </a>
                            <p style='text-align:center'>${catVo.catPrice}</p>

                            <p style='text-align:center;'>${catVo.introduction}</p>

                            <p style='text-align:center'>
                                <button type="button" class="layui-btn layui-btn-radius layui-btn-primary"
                                        onclick="">点击收藏</button>
                            </p>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </c:if>
        
        <%--<div class='col-md-4'>--%>
            <%--<div class='thumbnail'>--%>

                <%--<a href='/views/adopt/catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>--%>
                <%--<div class='caption' style='overflow:hidden'>--%>
                    <%--<a href='/views/adopt/catInfo.html'>--%>
                        <%--<h3 align='center' class='text-success'>这里是猫咪的类型</h3>--%>
                    <%--</a>--%>
                    <%--<p style='text-align:center'>这里是价格</p>--%>

                    <%--<p style='text-align:center;'>这是一只猫咪</p>--%>

                    <%--<p style='text-align:center'>--%>
                        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-primary"--%>
                                <%--onclick="">点击收藏</button>--%>
                    <%--</p>--%>
                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class='col-md-4'>--%>
            <%--<div class='thumbnail'>--%>

                <%--<a href='/views/adopt/catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>--%>
                <%--<div class='caption' style='overflow:hidden'>--%>
                    <%--<a href='/views/adopt/catInfo.html'>--%>
                        <%--<h3 align='center' class='text-success'>这里是猫咪的类型</h3>--%>
                    <%--</a>--%>
                    <%--<p style='text-align:center'>这里是价格</p>--%>

                    <%--<p style='text-align:center;'>这是一只猫咪</p>--%>

                    <%--<p style='text-align:center'>--%>
                        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-primary"--%>
                                <%--onclick="">点击收藏</button>--%>
                    <%--</p>--%>

                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class='col-md-4'>--%>
            <%--<div class='thumbnail'>--%>

                <%--<a href='/views/adopt/catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>--%>
                <%--<div class='caption' style='overflow:hidden'>--%>
                    <%--<a href='/views/adopt/catInfo.html'>--%>
                        <%--<h3 align='center' class='text-success'>这里是猫咪的类型</h3>--%>
                    <%--</a>--%>
                    <%--<p style='text-align:center'>这里是价格</p>--%>

                    <%--<p style='text-align:center;'>这是一只猫咪</p>--%>

                    <%--<p style='text-align:center'>--%>
                        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-primary"--%>
                                <%--onclick="">点击收藏</button>--%>
                    <%--</p>--%>

                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class='col-md-4'>--%>
            <%--<div class='thumbnail'>--%>

                <%--<a href='/views/adopt/catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>--%>
                <%--<div class='caption' style='overflow:hidden'>--%>
                    <%--<a href='/views/adopt/catInfo.html'>--%>
                        <%--<h3 align='center' class='text-success'>这里是猫咪的类型</h3>--%>
                    <%--</a>--%>
                    <%--<p style='text-align:center'>这里是价格</p>--%>

                    <%--<p style='text-align:center;'>这是一只猫咪</p>--%>

                    <%--<p style='text-align:center'>--%>
                        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-primary"--%>
                                <%--onclick="">点击收藏</button>--%>
                    <%--</p>--%>

                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class='col-md-4'>--%>
            <%--<div class='thumbnail'>--%>

                <%--<a href='/views/adopt/catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>--%>
                <%--<div class='caption' style='overflow:hidden'>--%>
                    <%--<a href='/views/adopt/catInfo.html'>--%>
                        <%--<h3 align='center' class='text-success'>这里是猫咪的类型</h3>--%>
                    <%--</a>--%>
                    <%--<p style='text-align:center'>这里是价格</p>--%>

                    <%--<p style='text-align:center;'>这是一只猫咪</p>--%>

                    <%--<p style='text-align:center'>--%>
                        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-primary"--%>
                                <%--onclick="">点击收藏</button>--%>
                    <%--</p>--%>

                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class='col-md-4'>--%>
            <%--<div class='thumbnail'>--%>

                <%--<a href='/views/adopt/catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>--%>
                <%--<div class='caption' style='overflow:hidden'>--%>
                    <%--<a href='/views/adopt/catInfo.html'>--%>
                        <%--<h3 align='center' class='text-success'>这里是猫咪的类型</h3>--%>
                    <%--</a>--%>
                    <%--<p style='text-align:center'>这里是价格</p>--%>

                    <%--<p style='text-align:center;'>这是一只猫咪</p>--%>

                    <%--<p style='text-align:center'>--%>
                        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-primary"--%>
                                <%--onclick="">点击收藏</button>--%>
                    <%--</p>--%>

                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
        <%--<div class='col-md-4'>--%>
            <%--<div class='thumbnail'>--%>


                <%--<a href='/views/adopt/catInfo.html'><img src='../../imgs/adopt_m5.jpg' alt='通用的占位符缩略图'></a>--%>
                <%--<div class='caption' style='overflow:hidden'>--%>
                    <%--<a href='/views/adopt/catInfo.html'>--%>
                        <%--<h3 align='center' class='text-success'>这里是猫咪的类型</h3>--%>
                    <%--</a>--%>
                    <%--<p style='text-align:center'>这里是价格</p>--%>

                    <%--<p style='text-align:center;'>这是一只猫咪</p>--%>

                    <%--<p style='text-align:center'>--%>
                        <%--<button type="button" class="layui-btn layui-btn-radius layui-btn-primary"--%>
                                <%--onclick="">点击收藏</button>--%>
                    <%--</p>--%>

                <%--</div>--%>
            <%--</div>--%>
        <%--</div>--%>
    </div>
</div>

<!-- 底部 -->
<jsp:include page="../common/bottom.jsp"></jsp:include>


<script src="<%=request.getContextPath()%>/plugins/layui/layui.js" charset="utf-8"></script>
<script src="<%=request.getContextPath()%>/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/plugins/bootstrap/js/bootstrap.min.js"></script>

<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '90%' //设置容器宽度
            , height: '400px'
            , arrow: 'hover' //始终显示箭头
            , anim: 'fade' //切换动画方式
        });
    });
</script>
</body>

</html>
